import QtQuick 1.0
import com.nokia.symbian 1.1
import PictureItem 1.0

Page{
    id: root

    property alias model: backImageGridView.model
    property int maxNumOfImages: 4
    property string sheetColor: "white"
    property int myMargin: 5
    property int imageMargin

    Rectangle{
        id: editModeRectangle
        parent: mainRect
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.leftMargin: myMargin*10
        anchors.rightMargin: myMargin*10
        anchors.topMargin: myMargin
        visible: true
        radius: myMargin*2
        color: "steelblue"
        height: myMargin*6

        Text{
            id: editText
            parent: editModeRectangle
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.margins: myMargin
            text: qsTr("Press and hold to edit")
            color: "white"
            font.bold: true            
            wrapMode: Text.WordWrap
        }
    }

    Rectangle{
        id: mainRect
        color: root.sheetColor
        anchors.fill: parent

        GridView{
            id: backImageGridView
            anchors.fill: parent
            anchors.margins: imageMargin
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            flow: GridView.LeftToRight
            interactive: false
            cellHeight: Math.floor(parent.height/2-imageMargin*2)
            cellWidth: Math.floor(parent.width/2-imageMargin*2)            

            MouseArea{
                property int currentId: -1
                property int newIndex
                property int index: backImageGridView.indexAt(mouseX, mouseY)
                id: gridviewMousearea
                anchors.fill: parent
                onPressAndHold: currentId = backImageGridView.model.get(newIndex = index).galleryIndex
                onReleased: currentId = -1
                onMousePositionChanged:
                    if (gridviewMousearea.currentId !== -1 && index !== -1 && index !== newIndex)
                        backImageGridView.model.move(newIndex, newIndex = index, 1)
            }

            delegate: Rectangle{
                id: gridDelegate
                height: backImageGridView.cellHeight
                width: backImageGridView.cellWidth                
                color: "transparent"

                Image{
                    id: delegateImage
                    parent: gridviewMousearea
                    x: gridDelegate.x+imageMargin
                    y: gridDelegate.y+imageMargin
                    width: gridDelegate.width-imageMargin
                    height: gridDelegate.height-imageMargin

                    fillMode: Image.PreserveAspectFit
                    sourceSize.width: width
                    sourceSize.height: height
                    source: url
                    scale: 0
                    asynchronous: true
                    opacity: imageOpacity

                    Rectangle{
                        anchors.fill: parent
                        border.color: "lightsteelblue"
                        border.width: 5
                        color: "transparent"
                        radius: 5
                        visible: delegateImage.state === "active"

                        SequentialAnimation on border.color{
                            ColorAnimation { from: "lightsteelblue"; to: "steelblue"; duration: 400 }
                            ColorAnimation { from: "steelblue"; to: "lightsteelblue"; duration: 400 }
                            running: visible
                            loops: Animation.Infinite; alwaysRunToEnd: true
                        }
                    }

                    Behavior on x { enabled: delegateImage.state !== "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { enabled: delegateImage.state !== "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }

                    SequentialAnimation on rotation {
                        NumberAnimation { to:  3; duration: 60 }
                        NumberAnimation { to: -3; duration: 120 }
                        NumberAnimation { to:  0; duration: 60 }
                        running: gridviewMousearea.currentId !== -1 && delegateImage.state !== "active"
                        loops: Animation.Infinite; alwaysRunToEnd: true
                    }

                    states: [
                        State {
                            name: "active";
                            when: gridviewMousearea.currentId === galleryIndex
                            PropertyChanges { target: delegateImage;
                                x: gridviewMousearea.mouseX - width/2;
                                y: gridviewMousearea.mouseY - height/2;
                                scale: 0.7;
                                z: 10 }
                        },
                        State {
                            name: "loaded"
                            when: delegateImage.status === Image.Ready
                            PropertyChanges { target: delegateImage; scale: 1 }
                        }
                    ]

                    transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }
                }
            }
        }
    }

    function setResultData(){
        pageStack.push(resultPage,{imageList: backImageGridView.model});
    }
}
